import React from 'react'
import './TodoFoot.css'
export default function TodoFoot({checkAllTodos,todos,removeTodos}) {
  let checkTodos = (e)=>{
    checkAllTodos(e.target.checked)
  }
  return (
    <div className="todo-footer">
        <label>
          <input type="checkbox" checked={todos.every(item=>item.done) && todos.length > 0} onChange={checkTodos}/>
        </label>
        <span>
          <span>已完成{todos.filter(item => item.done).length}</span> / 全部{todos.length}
        </span>
        <button className="btn btn-danger" onClick={()=>{removeTodos()}}>清除已完成任务</button>
      </div>
  )
}
